//- 先去这个pug文件中找
extends shopHead.pug

block append pageStyle
	link(href="${relativePath}/static/css/shopping/shopIndex.css" rel="stylesheet" type="text/css")

block shopContent
	//- 轮播图
	div.bigBanner
		//- swiper
		div.swiper-container
			div.swiper-wrapper
				div.swiper-slide
					img(src="${relativePath}/static/imgs/banner2.jpg")
				div.swiper-slide
					img(src="${relativePath}/static/imgs/banner3.jpg")
				
			//- 分页器
			div.swiper-pagination.changeColor
			//- 导航按钮
			//- div.swiper-button-prev
			//- div.swiper-button-next
	//- 内容
	div.indexContent.layout
		div.latestProduct(pnav="zxsp")
			div.titleBox
				h3
					span
					| 最新产品
					| <p>NEW PATTERN IS RELEASED TODAY</p>
			//- 最新商品
			div.latestThings
				div.list.latest01
					div.thingsBox
						//- 可加购物品
						ul.things
							
						//- div.bottomBox
						//- 	div.boxInner
						//- 		div.boxLeft.fl
						//- 			a.title(href="javascript:;")
						//- 				| 亚克力板材
						//- 				| <span>YAKELI</span>
						//- 			p 透光性能好  颜色纯正  色彩丰富  美观平整
						//- 		div.rightBox.fr
						//- 			a.addCar(href="javascript:;") 加入购物车
						//- 			a.lookZq(href="javascript:;") 查看专区

				//- div.list.latest02
				//- 	div.contentBox
				//- 		a(href="javascript:;")
				//- 			| 可喷反光膜
				//- 			| <p class="engTitle">KEPENFANGUANGMO</p>
				//- 		p.produce 高精度户外写真机喷绘
				
			//- 成品材料
		div.materialBox(pnav="cprm")
			div.title
				h4 
					| 成品材料
					| <span>FINISHED MATERIAL</span>
					| <i></i>
				div.line
			//- 轮播
			div#swiper-container02
				div.swiper-wrapper
					div.swiper-slide
						div.bannerBox
							div.item
								div.bannerL.fl.common_data
									div.circleCon
										a.material_one(href="javascript:;") 
										p 实时报价 优质批发
								div.bannerCenter.fl
									div.centerTop
										ul
											li
												div.infoBox.common_data
													a.private.board_one(href="javascript:;") 
													div.shotLine
													p private mail boxes
											li.bulb
												div.infoBox.common_data
													a.private.lightBox_one(href="javascript:;") 
													div.shotLine
													p slim light box
									div.centerBtm.common_data
										div.infoBox
											a.private.ident_one(href="javascript:;") 
											div.shotLine
											p product instructions
								div.bannerRig.fl
									ul
										li.common_data
											div.infoBox
												a.private.lightSource_one(href="javascript:;") 
												div.shotLine
												p card holder
										li.label.common_data
											div.infoBox
												a.private.printing_one(href="javascript:;") 
												div.shotLine
												p product label
					div.swiper-slide
						div.bannerBox
							div.item
								div.bannerL.banner2.fl.common_data
									div.circleCon
										a.office_b_one(href="javascript:;") 
										p 提高生活品质
								div.bannerCenter.fl
									div.centerTop
										ul
											li.ban2
												div.infoBox.common_data
													a.private.displayMater_one(href="javascript:;") 
													div.shotLine
													p display screen
											li.bulb.ban3
												div.infoBox.infoBox_02
													a.private.traffic_one(href="javascript:;") 
													div.shotLine
													p means of transportation
									div.centerBtm.ban4.common_data
										div.infoBox
											a.private.makeCl_one(href="javascript:;") 
											div.shotLine
											p material
								div.bannerRig.fl
									ul
										li.ban5.common_data
											div.infoBox
												a.private.equipGj_one(href="javascript:;") 
												div.shotLine
												p facility
										li.label.ban6.common_data
											div.infoBox
												a.private.badge_one(href="javascript:;") 
												div.shotLine
												p insignia
				div.swiper-button-next
				div.swiper-button-prev
		//- 定制加工
		div.materialBox.heatFilmBox(pnav="rmdz")
			div.title
				h4 
					| 定制加工
					| <span>CUSTOM PROCESSING</span>
					| <i></i>
				div.line
			//- 定制加工轮播
			div#swiper-container03
				div.swiper-wrapper
					div.swiper-slide
						div.heatFilm
							ul
								li.hasMar.dzjg_href.dzData_one
									h2 标识品牌
									p 很有格调的提示
									a.go(href="javascript:;") 点击前往 > 
								li.hasMar.PH.dzjg_href.dzData_two
									h2 写真喷绘
									p 高精准打造视觉盛宴
									a.go(href="javascript:;") 点击前往 > 
								li.hasMar.GG.dzjg_href.dzData_three
									h2 广告字体
									p 精致只有你想得到
									a.go(href="javascript:;") 点击前往 > 
								li.hasMar.DZ.dzjg_href.dzData_four
									h2 灯箱定制
									p 超薄灯箱更轻更亮更体验
									a.go(href="javascript:;") 点击前往 >
					div.swiper-slide
						div.heatFilm
							ul
								li.hasMar.xbx.dzjg_href.dzData_five
									h2 信报箱
									p 每一封信都充满爱意
									a.go(href="javascript:;") 点击前往 > 
								li.hasMar.PH.xsp.dzjg_href.dzData_six
									h2 显示屏亮化
									p 高精准打造视觉盛宴
									a.go(href="javascript:;") 点击前往 > 
								li.hasMar.GG.sbys.dzjg_href.dzData_seven
									h2 商标印刷
									p 精致只有你想得到
									a.go(href="javascript:;") 点击前往 > 
								li.hasMar.DZ.gglp.dzjg_href.dzData_eight
									h2 广告礼品
									p 更多精美礼品尽情定制
									a.go(href="javascript:;") 点击前往 >
					div.swiper-slide
						div.heatFilm
							ul
								li.hasMar.xcjg.dzjg_href.dzData_nine
									h2 型材加工
									p 型材加工
									a.go(href="javascript:;") 点击前往 > 
								li.hasMar.PH.jxjg.dzjg_href.dzData_ten
									h2 机械加工
									p 高精准打造视觉盛宴
									a.go(href="javascript:;") 点击前往 > 
								li.hasMar.GG.ggxc.dzjg_href.dzData_ele
									h2 广告宣传栏
									p 广告宣传栏
									a.go(href="javascript:;") 点击前往 > 
								li.hasMar.DZ.ztzl.dzjg_href.dzData_tel
									h2 展厅租赁
									p 更多展厅租赁尽在行业服务
									a.go(href="javascript:;") 点击前往 >
				div.swiper-button-next
				div.swiper-button-prev
		//- 行业服务
		div.materialBox.service(pnav="xqzx")
			div.title
				h4 
					| 行业服务
					| <span>INDUSTRY SERVICES</span>
					| <i></i>
				div.line
			div.serviceInfo
				ul
					li
						a(href="javascript:;")
							img(src="${relativePath}/static/imgs/service-BG-01.png")
					li.install.words
						a(href="javascript:;")
							| 广告安装
							| <p>Advertising installation</p>
						i
					li
						a(href="javascript:;")
							img(src="${relativePath}/static/imgs/service-BG-03.png")
					li.leasSelect
						div.opacityBox

					li.leasing.words
						a(href="javascript:;")
							| 车辆租赁
							| <p>Vehicle leasing</p>
						i.leas
					li.advertise.words
						a(href="javascript:;")
							| 广告设计
							| <p>Advertisement project</p>
						i.adv
					li
						a(href="javascript:;")
							img(src="${relativePath}/static/imgs/service-BG-07.png")
					li.equipment.words
						a(href="javascript:;")
							| 二手设备
							| <p>Second-hand equipment</p>
						i.equip
					li.installzl.words
						a(href="javascript:;")
							| 设备租赁
							| <p>Equipment leasing</p>
						i
					li(style="width:231px;")
						a(href="javascript:;")
							img(src="${relativePath}/static/imgs/service-BG-09.png")
		//- 猜你喜欢
		div.materialBox.guessLike(pnav="cnxh")
			div.title
				h4 
					| 猜你喜欢
					| <span>GUESS YOU LIKE</span>
					| <i></i>
				div.line
			div.guessBox.clear
				
				
		//- 我的足迹
		div.materialBox.myFoot.clear(pnav="wdzj")
			div.title
				h4 
					| 我的足迹
					| <span>MY FOOTPRINT</span>
					| <i></i>
				div.line
			div.footBox.clear
				ul
		//- 左边固定导航
		div.fixNavBox
			div.fixedNav
				ul
					li.nav(pnav="nav")
						a(href="#") 导航
					div.line
					li.zxsp(pnav="zxsp")
						a(href="javascript:;") 最新商品
					div.line
					li.cprm(pnav="cprm") 
						a(href="javascript:;") 成品热卖
					div.line
					li.rmdz(pnav="rmdz")
						a(href="javascript:;") 热门定制
					div.line
					li.xqzx(pnav="xqzx")
						a(href="javascript:;") 需求中心
					div.line
					li.cnxh(pnav="cnxh")
						a(href="javascript:;") 猜你喜欢
					div.line
					li.wdzj(pnav="wdzj")
						a(href="javascript:;") 我的足迹
					div.line
					li.hddb
						a(href="#") 返回顶部
		//- 最新商品列表模板
		script#goodsTemplate(type="text/html")
			| {{each data goods index}}
			| {{if index == 0}}
			//- 第一个商品
			div.list.latest01(style="background: url('{{goods.sku_img}}') no-repeat center center")
				div.thingsBox
					//- 可加购物品
					ul.things
						//- <% %> 这种是模板原生语法，其实就是js语法。
						//- | <% for(var i=0; i<goods.goods_imgs.length; i++) { %>
						//- li.firstLi(id="{{goods.goods_id}}")
						//- 	a(href="javascript:;")
						//- 		img(src="{{goods.goods_imgs[i]}}")
						//- 		p ￥{{goods.sell_price}}
						//- | <% } %>
						| {{set list = goods.list}}
						| {{each list one}}
						li.firstLi(id="{{one.goods_id}}" form_id="{{one.form_id}}")
							a(href="javascript:;")
								img(src="{{one.sku_img}}")
								p ￥{{one.sell_price}}
						| {{/each}}

					div.bottomBox
						div.boxInner
							div.boxLeft.fl
								| {{set title = goods.title}}
								| {{set description = goods.description}}
								a.title(href="javascript:;") {{title}}
								p {{description}}
							div.rightBox.fr
								| {{set gid = goods.goods_id}}
								| {{set fid = goods.form_id}}
								a.addCar(href="javascript:;" id="{{gid}}" fid="{{fid}}") 加入购物车
								a.lookZq(href="javascript:;") 查看专区
			| {{/if}}
			| {{if index > 0}}
			//- 后几个商品
			div.list.latest02(style="background-image: url('{{goods.sku_img}}')" id="{{goods.goods_id}}" form_id="{{goods.form_id}}")
				div.contentBox
					a(href="javascript:;") {{goods.goods_name}}
					p.produce {{goods.description}}
			| {{/if}}
			| {{/each}}

		//- 猜你喜欢模板
		script#guess(type="text/html")
			| {{each data arr}}
			div.likeBox
				a.guessTopImg(href="javascript:;" style="background-image:url(${relativePath}/static/imgs/like-BG-09.png)") {{arr.category_name}}
				div.likeList
					ul
						| {{set list = arr.list}}
						| {{each list temp}}
						li(id="{{temp.goods_id}}")
							a(href="javascript:;")
								img(src="{{temp.sku_img}}")
								p {{temp.sell_price}}
						| {{/each}}
			| {{/each}}

		//- 我的足迹
		script#footer(type="text/html")
			li
				a(href="javascript:;")
					img(src="{{sku_img}}")
					p
						| <span class="text">{{goods_name}}</span>
						| <span class="fr">￥{{sell_price}}</span>

	//- 分页
	//- div.pageBox
	//- 	nav.pageNav
	//- 		ul.paginationOne
	//- 			li
	//- 				a(href="javascript:;") <
	//- 			li
	//- 				a(href="javascript:;") 1
	//- 			li
	//- 				a(href="javascript:;") 2
	//- 			li
	//- 				a(href="javascript:;") 3
	//- 			li
	//- 				a(href="javascript:;") 下一页
	//- 			li
	//- 				a(href="javascript:;") >
block append pageScript
	script(src="${relativePath}/static/js/jquery.position-nav.js")
	script.
		$("#index").addClass("active");
		$("#index").click(function(){
			window.location.href='materIndex.html';
		});
		$("#hyfw1").click(function(){
			window.location.href='industryServiceIndex.html';
		});
		$(".fixedNav").positionNav();

		//- 点击二级菜单
		$(".rightMenu").on("click","li",function(){
			//alert("222");
			window.location.href = "materFinished.html";
		});
		//- 点击服务
		$(".install").click(function() {
			window.location.href = "../shopping/industryService_install.html"
		})
		$(".leasing").click(function() {
			window.location.href = "../shopping/industryService_car.html"
		})
		$(".equipment").click(function() {
			window.location.href = "../shopping/industryService_car.html"
		})
		$(".advertise").click(function() {
			window.location.href = "../shopping/industryService.html"
		})
		
		//- 成品材料轮播
		var mySwiper1 = new Swiper('#swiper-container02',{
			direction: 'horizontal',
			loop: true,
			//- 自动播放，单位毫秒
			//- autoplay: 5000,
			//- // 如果需要前进后退按钮
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',
		
			// 如果需要滚动条
			//- scrollbar: '.swiper-scrollbar',
		})
		//- 定制加工轮播
		var mySwiper2 = new Swiper('#swiper-container03',{
			direction: 'horizontal',
			loop: true,
			//- 自动播放，单位毫秒
			//- autoplay: 5000,
			//- // 如果需要前进后退按钮
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',
		
			// 如果需要滚动条
			//- scrollbar: '.swiper-scrollbar',
		})

		//- 点击固定菜单
		$(".fixedNav .nav").on("click",function(){
			$(this).addClass("active").siblings("li").removeClass("active");
		})
		$(".fixedNav .zxsp").on("click",function(){
			setTimeOut(function(){
				$(this).addClass("active").siblings("li").removeClass("active");
			},500)
		})
		$(".fixedNav .cprm").on("click",function(){
			setTimeOut(function(){
				$(this).addClass("active").siblings("li").removeClass("active");
			},500)
		})
		$(".fixedNav .xqzx").on("click",function(){
			setTimeOut(function(){
				$(this).addClass("active").siblings("li").removeClass("active");
			},500)
		})
		$(".fixedNav .rmdz").on("click",function(){
			setTimeOut(function(){
				$(this).addClass("active").siblings("li").removeClass("active");
			},500)
		})
		$(".fixedNav .cnxh").on("click",function(){
			setTimeOut(function(){
				$(this).addClass("active").siblings("li").removeClass("active");
			},500)
		})
		$(".fixedNav .wdzj").on("click",function(){
			setTimeOut(function(){
				$(this).addClass("active").siblings("li").removeClass("active");
			},500)
		})
		//- 首页接口获取
		//最新商品
		$.ajax({
			url: shopIp + '/Goods/freshGoods',
			data:{
				userToken:token,
				os:"web",
			},
			type:"post",
			dataType: "jsonp",
		}).done(function(data) {
			$(".latestThings").html(template("goodsTemplate", data));
		});
		$(".latestThings").on("click",".latest02",function() {
			if($(this).attr("form_id") == "0") {
				window.location.href="madeProcess.html?id="+$(this).attr("id");
			}else{
				window.location.href="madeProcess_d.html?id="+$(this).attr("id");
			}
		})
		$(".latestThings").on("click",".firstLi",function() {
			if($(this).attr("form_id") == "0") {
				window.location.href="madeProcess.html?id="+$(this).attr("id");
			}else{
				window.location.href="madeProcess_d.html?id="+$(this).attr("id");
			}
		})
		//- 点击加入购物车
		$(".latestThings").on("click",".addCar",function() {
			if($(this).attr("fid") == "0") {
				window.location.href="madeProcess.html?id="+$(this).attr("id");
			}else{
				window.location.href="madeProcess_d.html?id="+$(this).attr("id");
			}
		})

		 //- 猜你喜欢
		$.getJSON(shopIp + '/Goods/guessYouLike?callback=?', {
				userToken:token,
				os:"web",
		}, function(data) {
			var guessData = data.data;
			$(".guessBox").append(template("guess", data));
			//- 猜你喜欢列表进详情
			$(".likeList").on("click","li",function() {
				for(var i=0;i<guessData.length;i++) {
					var iLeng = guessData[i].list;
					for(var j=0;j<iLeng.length;j++) {
						if(iLeng[j].form_id == "0") {
							window.location.href="madeProcess.html?id="+$(this).attr("id");
						}else{
							window.location.href="madeProcess_d.html?id="+$(this).attr("id");
						}
					}
				}
			})
		});
		//- 我的足迹
		$.getJSON(shopIp + '/Goods/footmark?callback=?', {
				userToken:token,
				os:"web",
		}, function(data) {
			var footerData = data.data;
			console.log(footerData.length);
			if(footerData.length == 0) {
				var ele = '<img src="${relativePath}/static/imgs/zw.png" class="imgBig" style="margin-top:0">';
				$(".footBox ul").append(ele);
			}else{
				for(var i=0;i<footerData.length;i++){
					var footHtml = template("footer",footerData[i]);
					//console.log(footHtml);
					$(".footBox ul").append(footHtml);
				}
			}
		});
		//- 成品材料
		$.post(shopIp+"/Category/homePageList",{
			userToken:token,
			category_id:4
		},function(data) {
			var res = data.data;
			$(".material_one").html( res[0].name );
			$(".board_one").html( res[9].name );
			$(".lightBox_one").html( res[3].name );
			$(".ident_one").html( res[7].name );
			$(".lightSource_one").html(res[4].name);
			$(".printing_one").html(res[11].name);
			$(".office_b_one").html(res[8].name);
			$(".displayMater_one").html( res[5].name);
			$(".makeCl_one").html(res[1].name);
			$(".traffic_one").html(res[10].name);
			$(".equipGj_one").html(res[2].name);
			$(".badge_one").html( res[6].name );
			$(".common_data").click(function() {
				window.location.href ='materFinished.html';
			})
		})
		//- 定制加工
		$.post(shopIp+"/Category/homePageList",{
			userToken:token,
			category_id:8
		},function(data) {
			var res = data.data;
			$(".dzData_one h2").html( res[1].name );
			$(".dzData_two h2").html( res[5].name );
			$(".dzData_three h2").html( res[0].name );
			$(".dzData_four h2").html( res[3].name );
			$(".dzData_five h2").html(res[6].name);
			$(".dzData_six h2").html(res[4].name);
			$(".dzData_seven h2").html(res[9].name);
			$(".dzData_eight h2").html( res[10].name);
			$(".dzData_nine h2").html(res[2].name);
			$(".dzData_ten h2").html(res[7].name);
			$(".dzData_ele h2").html(res[8].name);
			$(".dzData_tel h2").html( res[11].name );
			$(".dzjg_href").click(function() {
				window.location.href ='dzjG.html';
			})
		})

